import { PageContainer } from '@ant-design/pro-components';
import { useState } from 'react';
import './index.less';

const AccessPage: React.FC = () => {

  const [data, setData] = useState<any[]>([1,2,3,4]);
 
  return (
    <PageContainer
      ghost 
      header={{
        title: '拖拽列表',
      }}
    >
      <div>
      {
        data.map((item: any)=>{
          return (
            <div
             className='item' 
             key={item}
             draggable="true"
             onDragStart={() => {console.log("onDragStart", item);}}
             onDrop={() => {console.log("onDrop", item);}}
             onDragOver={() => {console.log("onDragover", item);}}
             >
               {item}
             </div>
          )
        })
      }
      </div>
     
    </PageContainer>
  );
};

export default AccessPage;
